import './index.scss';
import React, { useEffect, useState, useRef } from "react";
import { user_settings, user_config_set } from '@/utils/mixin.ts'
import { Button, List, message, Select } from 'antd';
import { ArrowLeftOutlined, FallOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

const General = () => {
    const { t, i18n } = useTranslation();
    const [settingsList, setSettingsList] = useState([]);
    const [editState, setEditState] = useState(false);
    const [editState1, setEditState1] = useState(false);
    const [editValue, setEditValue] = useState('');
    const [lang , setLang] = useState('zh')
    const navigate = useNavigate()
    
    useEffect(() => {
        getUserSettings();
    }, []);  // 空数组表示只在组件挂载时执行
    const getUserSettings = () => {
        user_settings({
            email: localStorage.getItem('email')

        }).then(res => {
            if (res) {
                setSettingsList(res.data);
                setLang(res.data[1].config_value)
            }
        });
    }

    const Signin = () => {
        localStorage.removeItem('token')
        navigate('/login')
    }

    const edit = async(ind) => {
        if(ind) {
            editState1 ? setEditState1(false) : setEditState1(true);
            if (editState1) {
                await user_config_set({
                    email: localStorage.getItem('email'),
                    config_key: settingsList[1].config_key,
                    config_value: lang
                }).then(res => {
                    if (res) {
                        getUserSettings();
                    } else {
                        message.error(res.msg);
                    }
                });
            }
        } else {
            editState ? setEditState(false) : setEditState(true);
            setEditValue(settingsList.length && settingsList[0].config_value *100)
            if (editState && editValue!=='') {
                await user_config_set({
                    email: localStorage.getItem('email'),
                    config_key: settingsList[0].config_key,
                    config_value: editValue / 100
                }).then(res => {
                    if (res) {
                        getUserSettings();
                    } else {
                        message.error(res.msg);
                    }
                });
            }
        }
        
    }

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
        i18n.changeLanguage(value);
        setLang(value)
    };

    return (
        <div className="general">
            <div className="header_general">
                <Button type="text" className="goBackBtn" onClick={() => window.history.go(-1)} icon={<ArrowLeftOutlined />}></Button>
                <p className="title">{t('General')}</p>
            </div>
            <div className="content_general">
                <List
                    className="demo-loadmore-list"
                    itemLayout="horizontal"
                    dataSource={settingsList}
                    renderItem={(item, ind) => (
                        <List.Item
                            actions={[<span className="editBtn" onClick={() => edit(ind)}>编辑</span>]}
                        >
                            <List.Item.Meta
                                avatar={<FallOutlined />}
                                title={<span>{item.config_key}</span>}
                            />
                            {!ind && <div>{editState ?
                            <div><input className="editInput" value={editValue} onChange={(e) => { setEditValue(e.target.value) }}/> % </div>:
                            <div className='config_value'>{item.config_value * 100} %</div>}</div>}


                            {ind == 1 && <div>{editState1 ?
                            <div><Select
                            defaultValue={lang}
                            style={{ width: 70 }}
                            bordered={false}
                            onChange={handleChange}
                            options={[
                              { value: 'zh', label: '中文' },
                              { value: 'en', label: 'English' },
                            ]}
                          /></div>:
                            <div className='config_value'>{item.config_value}</div>}</div>}
                            
                        </List.Item>

                         
                        
                    )}
                />
            </div>
            <div className='up'>
                <Button type="primary" className='tc' style={{marginTop: '204px'}} htmlType="submit" onClick={() => Signin()}>
                            退出登录
                </Button>
            </div>
           
        </div>
    )

}

export default General;